<template>
  <div>
    <van-tabs v-model="activeName" @click="onClick" sticky>
      <template v-for="nav in navList">
        <van-tab :title="nav.text" :name="nav.status">
			<iframe
                frameborder="no"
                border="0"
                marginwidth="0"
                marginheight="0"
                width="298"
                height="52"
               
              ></iframe>
          <template v-if="orderList.length > 0">
            <div class="order" v-for="(item, index) in orderList" :key="index">
              <template v-for="cartItem in item.cartInfo">
                <van-cell :title="item.createTime" :border="false" :value="nav.text" v-if="cartItem.isReply == 0" />
                <van-cell :title="item.createTime" :border="false" value=" " v-else />
                <van-card
                  style="background-color: #ffffff"
                  :num="cartItem.cartNum"
                  :price="item.payPrice"
                  :desc="cartItem.productInfo.storeInfo"
                  :title="cartItem.productInfo.storeName"
                  :thumb="imgUrls + cartItem.productInfo.image"
                >
                  <template #price>
                    <span v-if="cartItem.productInfo.isIntegral == 1">
                      <font size="4" color="#ED6A0C">{{ cartItem.productInfo.attrInfo.integral }} </font>
                      <font size="3" color="#ED6A0C">积分</font>
                    </span>
                    <span v-else>
                      <font size="3" color="#ED6A0C" v-if="item.combinationId == 0">￥</font>
                      <font size="3" color="#ED6A0C" v-if="item.combinationId != 0">团购价￥</font>
                      <font size="4" color="#ED6A0C">{{ cartItem.truePrice }}</font>
                    </span>
                  </template>
                  <template #tags>
                    <van-tag plain type="danger">щα泳てrч 僵GΓΑ∨∑＄</van-tag>
                  </template>
                  <template #footer>
                    <van-button
                      v-if="item.statusDto.type == 0"
                      class="btn"
                      @click="
                        payInfo = item
                        show = true
                      "
                      >立即付款</van-button
                    >
                    <van-button v-if="item.statusDto.type == 0" class="btn" @click="cancelOrder(item.orderId)"
                      >取消订单</van-button
                    >
                    <van-button v-if="item.combinationId != 0" class="btn" :to="'/groupBookOk?groupId=' + item.pinkId"
                      >查看团购</van-button
                    >
                    <van-button v-if="item.statusDto.type == 1" class="btn" @click="$toast.success('已提醒卖家发货！')"
                      >提醒发货</van-button
                    >
                    <van-button v-if="item.statusDto.type == 2" class="btn" @click="takeOrder(item.orderId)"
                      >确认收货</van-button
                    >
                    <van-button class="btn" :to="'/order?key=' + item.unique">立即查看</van-button>
                    <van-button v-if="item.statusDto.type == 4" class="btn" @click="delOrder(item.orderId)"
                      >删除订单</van-button
                    >
                  </template>
                </van-card>
                <van-divider :style="{ width: 'calc(100% - 50px)', margin: '0 auto' }" />
              </template>
            </div>
            <van-divider v-if="orderList.length > 9" @click="move(nav.status)">点击加载更多</van-divider>
          </template>
          <template v-else>
            <van-empty description="空空如也!" />
          </template>
        </van-tab>
      </template>
    </van-tabs>
    <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
      <van-radio-group v-model="radio" v-if="payInfo.payIntegral == 0">
        <van-cell center icon="shop-o">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #title>
            <span class="custom-title">余额</span>
          </template>
          <template #label>
            <span class="custom-title">￥{{ userAccount.nowMoney }}</span>
          </template>
          <template #right-icon>
            <van-radio name="1"></van-radio>
          </template>
        </van-cell>
        <van-cell center icon="shop-o">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #title>
            <span class="custom-title">微信</span>
          </template>
          <template #label>
            <span class="custom-title">暂未开通</span>
          </template>
          <template #right-icon>
            <van-radio name="1" disabled></van-radio>
          </template>
        </van-cell>
      </van-radio-group>
      <van-radio-group v-model="radio" v-else>
        <van-cell center icon="shop-o">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #title>
            <span class="custom-title">积分支付</span>
          </template>
          <template #right-icon>
            <van-radio name="1"></van-radio>
          </template>
        </van-cell>
      </van-radio-group>
      <van-button block type="danger" class="btns" @click="pay()">确定</van-button>
    </van-popup>
  </div>
</template>

<script>
import { getOrderList, cancelOrder, payOrder, takeOrder, delOrder } from '@/api/order.js'
import { getBalance } from '@/api/wallet.js'
export default {
  data() {
    return {
      userAccount: {},
      imgUrls: this.$baseApi,
      radio: '1',
      status: 0,
      show: false,
      navList: [
        {
          status: 0,
          text: '待付款'
        },
        {
          status: 1,
          text: '待发货'
        },
        {
          status: 2,
          text: '待收货'
        },
        {
          status: 3,
          text: '待评价'
        },
        {
          status: 4,
          text: '已完成'
        }
      ],
      activeName: this.$route.query.type * 1,
      limit: 0,
      orderList: [],
      payInfo: {}
    }
  },
  created() {
    this.getList(this.$route.query.type)
    this.getBalance()
  },
  methods: {
    //收货
    takeOrder(id) {
      takeOrder({
        uni: id
      }).then(res => {
        if (res.status == 200) {
          this.$toast.success('收货成功')
          this.activeName = 3
          this.getList(this.activeName)
        }
      })
    },
    //我的钱包数据
    getBalance() {
      getBalance().then(res => {
        this.userAccount = res.data
      })
    },
    pay() {
      payOrder({
        uni: this.payInfo.orderId,
        from: 'h5',
        paytype: this.payInfo.payIntegral == 0 ? 'yue' : 'integral'
      }).then(res => {
        if (res.status == 200) {
          this.$toast.success('支付成功')
          this.getList(this.$route.query.type)
          this.show = false
        }
      })
    },
    //取消订单
    cancelOrder(id) {
      cancelOrder({
        id: id
      }).then(res => {
        if (res.status == 200) {
          this.$toast.success('取消成功')
          this.getList(this.$route.query.type)
        }
      })
    },
    delOrder(id) {
      delOrder({
        uni: id
      }).then(res => {
        if (res.status == 200) {
          this.$toast.success('删除成功')
          this.getList(this.$route.query.type)
        }
      })
    },

    //name为van-tab的name
    onClick(name, title) {
      this.getList(name)
    },
    getList(name, limit) {
      getOrderList({
        type: name,
        limit: limit
      }).then(res => {
        this.orderList = res.data.content
      })
    },
    move(type) {
      if (this.status == type) {
        this.limit += 10
      } else {
        this.limit = 0
        this.limit += 10
      }
      this.status = type
      this.limit += 10
      this.getList(type, this.limit)
    }
  }
}
</script>

<style scoped>
.order {
  margin-top: 10px;
  background-color: #ffffff;
}

.order .btn {
  height: 30px;
  border-radius: 7px;
}

.btns {
  width: calc(100% - 30px);
  margin: 10px auto;
}
</style>
